<template>
  <div id="order-query-wrapper">
    <div class="content">
      <el-row class="first" style="margin: 30px 0 0 30px;">
        <el-col :span="6">
          <h4>收费标准号</h4>
        </el-col>
        <el-col :span="6">
          <h4>收费标准名称</h4>
        </el-col>
        <el-col :span="6">
          <h4>业务类型</h4>
        </el-col>
        <el-col :span="6">
          <h4>服务费类型</h4>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { reactive } from 'vue'

const form = reactive({
  ordNo: '', // 订单编号
  ordName: '', // 订单名称
  ordState: '', // 订单状态
  agreeNo: '', // 协议编号
  busNo: '', // 商家编号
  busName: '', // 商家名称
  genConsNo: '', // 发电户号
  genConsName: '', // 发电户名
  cusNo: '', // 客户编号
  cusName: '', // 客户名称
  ctrtNo: '', // 合同编号
  ctrtName: '', // 合同名称
  siteName: '', // 站点名称
  standName: '', // 计费标准
  payWay: '', // 缴费方式
  orderType: '', // 订单类型
  createUserName: '', // 创建人
  startTime: '', // 创建时间最小
  endTime: '', // 创建时间最大
})
const handleClick = () => {
  console.log('click')
}


const onSubmit = () => {
  console.log('submit!')
}
const onReset = () => {
  console.log('submit!')
}
</script>
<style lang="scss" scoped>
#order-query-wrapper{
  display: flex;
  justify-content: center; /* 水平方向居中 */
  align-items: center;     /* 垂直方向居中 */
  width: 100%;
  height: 100%;
  overflow-y: hidden;
  background-color: lightcoral;

  .content{
    /* 比父容器宽小10px */
    width: calc(100% - 40px);
    /* 比父容器高小10px */
    height: calc(100% - 40px);
    background-color: #fff;
    border-radius: 30px;
  }
}


</style>